<template lang='pug'>
.wraper
	img(src="./images/pay-succ.png", alt="", width="178")
	p.c-msg(v-if="info.isPickUp == '1'") 请在自提地址完成自提
	p.c-msg(v-else) 预计{{ info.expressTime }}送达
	
	.pay-box
		.c-table
			span.left 支付金额
			span.right &yen;{{ info.payAmount | formatPrice }}
		.c-table
			span.left 支付方式
			span.right {{ info.payMethodName }}

		template(v-if="info.isPickUp == '1'")
			.c-table
				span.left 自提地址
				span.right {{ info.pickUpAddress }}
			.c-table
				span.left 门店电话
				span.right {{ info.pickUpPhone }}
			.c-table
				span.left 自提时间
				span.right {{ info.expressTime }}
		template(v-else)
			.c-table
				span.left 配送地址
				span.right {{ info.receiveAddress }}

	template(v-if="info.remainProductFlag==1")
		p.c-time *您的购物车还有未结算商品，请及时下单结算哦~
		router-link.btn.c-back(to="/cart1") 返回购物车继续结算
		router-link.btn.c-order(to="/orders") 查看订单详情
	template(v-else)
		router-link.btn.c-back(to="/orders") 查看订单详情
		router-link.btn.c-order(to="/") 去逛逛

	div.dlapp
		a(href="http://sale.suning.com/CMWS/appdownload/index.html")
</template>

<script>
	import fetch from '@/config/fetch'
	import { tps, wpay } from '@/config/env'
	import router from '@/router/index'

	export default {
		name: 'cart',
		data(){
			return {
				info: {
					payAmount: 0
				}
			}
		},
		components: {  

		},
		mounted (){
			// window.addEventListener("popstate", function(e) {
			// 	window.history.pushState({
			// 		title: '支付成功',
			// 		url: location.hash
			// 	}, "", "");
			// });
		},
		created(){
			fetch({
				url: tps + '/app/cart4/showPaySuccessInfo.do',
				params: {
					app: 'wap',
					appVersion: '3.2.2',
					orderId: this.$route.params.orderid
				},
				jsonp: 'callBack'
			}).then((info) => {
				console.log(info)
				if (info.code==1) {
					this.info = info.data
				}else{
					alert(info.code)
				}
				console.log(this.info.isPickUp)
			});
		},
		methods: {

		},
		computed: {

		}
		,beforeRouteLeave (to, from, next, redirect) {
			// if(to.path != '/' && to.path.indexOf('cart1') != -1 && to.path.indexOf('orders') != -1){
			// 	next(false)
			// 	router.push('/')
			// }else{
			// 	next(true)
			// }
			next(true);
		}
		,beforeRouteEnter(to, from, next) {
			if (/order/ig.test(from.fullPath)) {
				return next({path: '/my'});
			}
			next(true);
		}
	}
</script>

<style lang="scss" scoped>

	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}

	.wraper{
		background-color: #fff;
		text-align: center;
		img{
			display: block;
			margin: _(150) auto 0;
		}
		.c-msg{
			font-size: _(32);
			color:#ff772f;
			margin-top: .8rem;
		}
		.pay-box{
			width:_(658);
			margin: _(30) auto 0;
			background-color: #fbfbfb;
			padding: _(20) 0;
		}
		.c-table{
			display: block;
			overflow: hidden;
			width:_(570);
			margin: _(20) auto 0;
			font-size: _(26);
			.left{
				float: left;
				display: inline-block;
				width:_(115);
				color:#c0c0c0;
			}
			.right{
				float: right;
				text-align: left;
				margin-left:_(15);
				display: inline-block;
				width:_(440);
				color:#7e7e7e; 
			}

		}
		.btn{
			display: block;
			background: #ff7d37;
			width: _(470);
			height: _(118);
			line-height: _(118);
			font-size: _(32);
			text-align: center;
			color:#fff;
			border-radius: _(130);
			margin: _(40) auto 0;
		}
		.c-order{
			background-color: #fff;
			border: 1px solid #ff7d37;
			color:#ff7d37;
		}
		.c-time{
			width: _(400);
			color:#999999;
			font-size: _(28);
			margin: _(40) auto 0;
		}

		.dlapp {
			position: relative;
			width: _(670);
			height: _(120);
			margin: _(120) auto _(40);
			background: url(images/dlapp-bg.png);
			background-size: contain;
			a {
				position: absolute;
				top: _(30);
				right: _(42);
				width: _(200);
				height: _(60);
				background: url(images/dlapp-btn.png);
				background-size: contain;
			}
		}
	}
</style>
